ActiveReports 11
Viewing Reports using HTML5 Viewer
ActiveReports 11 > ActiveReports User Guide > Viewing Reports > HTML5 > Viewing Reports using HTML5 Viewer

Viewing Reports in HTML5 Viewer

The following steps describe how to view reports in HTML5 Viewer.

  1. Create a new Visual Studio Web Application project.
  2. Copy and place GrapeCity.ActiveReports.Viewer.Html.js, GrapeCity.ActiveReports.Viewer.Html.min.js and GrapeCity.ActiveReports.Viewer.Html.css files at a suitable location near the target HTML page.
    Note: In ActiveReports, these files are located in the C:\Program Files\GrapeCity\ActiveReports 11\Deployment\Html
  3. In the target HTML page, add the references to the GrapeCity.ActiveReports.Viewer.Html.css, GrapeCity.ActiveReports.Viewer.Html.js and its following dependencies:
    • jQuery 1.9.0 or higher
    • Bootstrap 3.0
    • Knockout.js 2.3.0 or higher
    Note: You can obtain the dependencies like jQuery from Content Delivery Network (CDN) or copy them locally.
    Paste inside the <head></head> tags
    Copy Code
    <link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" />    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
    type="text/javascript"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"
    type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"
    type="text/javascript"></script>
    <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js"
    type="text/javascript"></script>
  4. Add the reference to the bootstrap.min.css in the target HTML page.
    Paste inside the <head></head> tags
    Copy Code
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    
  5. In the target HTML page, add the DIV element that will contain the HTML5 Viewer.
    Paste inside the <body></body> tags
    Copy Code
    <div id="viewer" style="width:800px;height:600px;"></div>
    
  6. From the Project menu, select Add New Item.
  7. In the Add New Item dialog that appears, select ActiveReports 11 Web Service and click Add. The ActiveReports 11 Web Service is required for the proper functioning of the HTML5 Viewer.
  8. Add an ActiveReport to the Visual Studio project. See Adding an ActiveReport to a Project for information on adding different report layouts.
  9. Open the licenses.licx file, and add the following references to it.
    Paste inside the licenses.licx file
    Copy Code
    GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v11, Version=11.2.10750.0,
    Culture=neutral, PublicKeyToken=cc4967777c49a3ff
    GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v11, Version=11.2.10750.0,
    Culture=neutral, PublicKeyToken=cc4967777c49a3ff
    GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v11,
    Version=11.2.10750.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
    GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v11, Version=11.2.10750.0,
    Culture=neutral, PublicKeyToken=cc4967777c49a3ff
  10. Add the following code to view your report in the HTML5 Viewer. The code might vary depending on the technology that you use to develop the HTML5 Viewer component.
    Paste inside the <script></script> tags
    Copy Code
    $(function ()
    {
    var viewer = GrapeCity.ActiveReports.Viewer(
    {
    element: '#viewer',
    report: {
    id: "PageReport.rdlx"
    },
    reportService: {
    url: '/ActiveReports.ReportService.asmx'
    },
    uiType: 'desktop'
    });
    });

    Note: The reportID should be a full name of the class when you display a Section Report.
  11. Press F5 to run the project.
See Also